
// Image Mask
image-mask()
  background-size: cover
  background-position: center
  background-repeat: no-repeat

  &:before
    position: absolute
    top: 0
    left: 0
    display: block
    content: ''
    width: 100%
    height: 100%
    opacity: 0.4
    background-color: #394245
    background-image: linear-gradient(234deg, #394245 0%, #000 100%)

// Color
color-block-default()
  color: #000000
  background-color: #eaedf6
  background-image: linear-gradient(20deg, #e2e5ed, #f1f4f4)

color-block-orange()
  color: #ffffff
  background-color: #e77842
  background-image: linear-gradient(45deg, #e77842, #f7c068)

color-block-red()
  color: #ffffff
  background-image: #ff5858
  background-image: linear-gradient(1deg, #f857a6, #ff5858)

color-block-violet()
  color: #ffffff
  background-color: #b53cff
  background-image: linear-gradient(20deg, #b53cff, #f952ff)

color-block-blue()
  color: #ffffff
  background-color: #6bd0ff
  background-image: linear-gradient(40deg, #327ae7, #6bd0ff)

color-block-yellow()
  color: #ffffff
  background-color: #ffd62e
  background-image: linear-gradient(40deg, #ffb040, #ffd62e)



// Card
card(margin, padding, minWidth, minHeight, borderRadius, number) {
  $basis = (100 / number)%

  .card-wrap {
    display: flex
    flex-wrap: wrap
    margin: 0 (-(margin))
  }

  .card-item {
    display: flex
    flex: 1 1 $basis

    &.large {
      flex: 1 1 $basis * 2
    }

    &:nth-child(1n) article {
      color-block-orange()
    }

    &:nth-child(2n) article {
      color-block-red()
    }

    &:nth-child(3n) article {
      color-block-violet()
    }

    &:nth-child(4n) article {
      color-block-blue()
    }

    &:nth-child(5n) article {
      color-block-yellow()
    }

    &.img {
      .card-cover {
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        z-index: -1
        background-size: cover
        background-position: center
        background-repeat: no-repeat

        &:before {
          display: block
          content: ''
          width: 100%
          height: 100%
          opacity: 0.4
          background-color: #394245
          background-image: linear-gradient(234deg, #394245 0%, #000 100%)
        }
      }
    }
    
    article {
      position: relative
      z-index: 0
      flex: 1 1 100%
      margin: margin
      padding: padding
      min-width: minWidth
      min-height: minHeight
      border-radius: borderRadius
      overflow: hidden
      word-break: break-all
      transition: all 0.2s ease
      filter: grayscale(.7)

      &:hover {
        transform: translateY(-5px)
        filter: grayscale(0)
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5)
      }

      .card-link {
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        width: 100%
        height: 100%
        z-index: 1
      }
    }
  }
}

// ContentContainer 
content-container-desktop() {
  .content-container {
    max-width: desktop-max-content-width
    width: 92vw
    min-height: desktop-banner-margin * 2
    margin: 0 auto
  }
}

content-container-mobile() {
  .content-container {
    width: auto
    min-width: 70vw
    min-height: mobile-banner-margin * 2
    margin: 0 content-margin-min
  }
}
